<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/11/24
  Time: 13:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>微博红包查询</title>

    <!-- Bootstrap -->
    <link href="../../weibo-pay-view/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- 日期控件 -->
    <link href="../../weibo-pay-view/static/css/datetimepicker.css"
          rel="stylesheet">
    <script src="../../weibo-pay-view/static/js/html5shiv.min.js"></script>
    <script src="../../weibo-pay-view/static/js/respond.min.js"></script>
    <script src="../../weibo-pay-view/static/js/plugins/laydate/laydate.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>

    <![endif]-->
    <style>
        .col-center {
            float: none;
            display: block;
            margin-left: 20%;
            margin-right: 20%;
        }

        .top-padding {
            padding-top: 20px;
        }

        .bottom-padding {
            padding-bottom: 20px;
        }
    </style>

    <style type="text/css">
        .background {
            display: block;
            width: 100%;
            height: 100%;
            opacity: 0.4;
            filter: alpha(opacity=40);
            background:while;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2000;
        }
        .progressBar {
            border: solid 2px #86A5AD;
            background: white url(${pageContext.request.contextPath}/static/image/progressBar_m.gif) no-repeat 10px 10px;
        }
        .progressBar {
            display: block;
            width: 160px;
            height: 28px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -74px;
            margin-top: -14px;
            padding: 10px 10px 10px 50px;
            text-align: left;
            line-height: 27px;
            font-weight: bold;
            position: absolute;
            z-index: 2001;
        }
    </style>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../../weibo-pay-view/static/js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../../weibo-pay-view/static/js/bootstrap.min.js"></script>
    <script src="../../weibo-pay-view/static/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="col-center">
    <form class="form-inline top-padding bottom-padding">
        <div class="form-group">
            <label for="username">手机号&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input type="text" class="form-control" id="username" placeholder="请输入手机号">
        </div>
        <div class="form-group">
            <label for="password">&nbsp;&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;码&nbsp;</label>
            <input type="text" class="form-control" id="password" placeholder="请输入密码">
        </div>
        <button type="button" class="btn btn-default" id="addBtn" >新增</button>
        <%--<button type="button" class="btn btn-default" id="delBtn">删除</button>--%>
    </form>

    <label class="control-label col-sm-2">查询日期</label>
    <div class="col-sm-7">
        <input id="startTimePicker" name="startTimePicker" class="laydate-icon layer-date" placeholder="请选择日期" readonly>
        <label class="control-label">到</label>
        <input id="endTimePicker" name="endTimePicker" class="laydate-icon layer-date"  placeholder="请选择日期" readonly>
    </div>
    <button type="button" class="btn btn-default" id="queryBtn">查询</button>

    <div class="row">
        <table class="table .table-condensed" id="userList">
        </table>
    </div>
</div>
<div id="background" class="background" style="display: none; "></div>
<div id="progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>

<script type="text/javascript">
    var ajaxbg = $("#background,#progressBar");
    $(function () {
        laydate.render({
            elem: '#startTimePicker',
            type: 'datetime',
            max: 0,
            value: new Date(new Date()-24*60*60*1000),
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });

        laydate.render({
            elem: '#endTimePicker',
            type: 'datetime',
            max: 0,
            value: new Date(),
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });
        query();
    });

    function removeGrandpa(obj, username) {
        ajaxbg.show();
        $(obj).parent().parent().remove();
        var params = {};
        params.username = username;
        var expr = '#' + params.username;
        $(expr).remove();
        $.get('/weibo-pay-view/delUser', params)
        ajaxbg.hide();
    }

    $("#addBtn").click(function () {
        ajaxbg.show();
        var params = {};
        params.username = $("#username").val();
        params.password = $("#password").val();
        if(params.username == ''){
            alert("请输入账号");
            ajaxbg.hide();
            return;
        }
        if( params.password ==''){
            alert("请输入密码");
            ajaxbg.hide();
            return;
        }
        $.get('/weibo-pay-view/addUser', params, function(data,status){
            if(data.success){
                ajaxbg.hide();
                query();
            }else{
                alert("添加账号异常: " + data.message);
            }
        });

    });

    $("#delBtn").click(function () {
        var params = {};
        params.username = $("#username").val();
        var expr = '#' + params.username;
        $(expr).remove();
        $.get('/weibo-pay-view/delUser', params)
    });

    $("#queryBtn").click(query);

    function query() {
        ajaxbg.show();
        var params = {};
        params.startTime = $("#startTimePicker").val();
        params.endTime = $("#endTimePicker").val();

        $.getJSON('/weibo-pay-view/viewAll', params, function (data) {
            var tableContent = '<tr class="info">\n' +
                '                <th class="info">手机号</th>\n' +
                '                <th class="info">红包金额（元）</th>\n' +
                '                <th class="info">操作</th>\n' +
                '            </tr>';
            $.each(data, function (n, value) {
                tableContent += '<tr class="success" id="' + value.username + '">\n' +
                    '                <td class="success">' +
                    value.username +
                    '</td>\n' +
                    '                <td class="success">' +
                    value.amount +
                    '</td>\n' +
                    '                <td class="success"><a href="#" onclick="removeGrandpa(this,' + value.username + ')">删除</a></td>\n' +
                    '            </tr>';

            });
            $("#userList").html(tableContent);
            ajaxbg.hide();
        })
    }
</script>
</body>
</html>
